<template>
  <div v-if="isDate">
    <el-date-picker v-model="pickerValue" :type="dateType" placeholder="请选择日期" @change="updateValue" />
  </div>
  <div v-else-if="isTime">
    <el-time-picker v-model="pickerValue" :is-range="isRange" placeholder="请选择时间"
      @change="updateValue"></el-time-picker>
  </div>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  type: {
    type: String,
    default: 'date'
  },
  range: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: String,
    default: ''
  }
})
const pickerValue = ref('')
const isDate = computed(() => {
  return props.type === 'date' || props.type === 'dateTime'
})
const isTime = computed(() => {
  return props.type === 'time'
})

const isRange = computed(() => {
  return props.range
})

const dateType = computed(() => {
  if (props.type === 'date') {
    return isRange.value ? 'daterange' : 'date'

  } else if (props.type === 'dateTime') {
    return isRange.value ? 'datetimerange' : 'datetime'
  }
})

watch(() => props.modelValue, (val) => {
  pickerValue.value = val
}, {
  immediate: true
})

const updateValue = (val) => {
  emit('update:modelValue', val)
}

</script>

<style lang="scss" scoped></style>